<template>
    <view class="contianer">
        <map
            :latitude="latitude"
            :longitude="longitude"
            :show-location="false"
            style="width: 100%; height: 100%;"
            :markers="[{
                id: 1,
                latitude,
                longitude,
                iconPath: '/static/images/location.png',
                width: 36,
                height: 30,
                callout: {
                    display: 'ALWAYS',
                    content: '我的位置',
                    color: '#27BA9B',
                    fontSize: 10,
                    borderRadius: 2,
                    borderWidth: 1,
                    borderColor: '#27BA9B',
                    bgColor: '#fff',
                    padding: 3,
                },
                // label: {
                //     x: -20,
                //     content: '我的位置',
                //     color: '#27BA9B',
                //     fontSize: 10,
                //     borderRadius: 2,
                //     borderWidth: 1,
                //     borderColor: '#27BA9B',
                //     bgColor: '#fff',
                //     padding: 3,
                // }
            }]"
        ></map>

    </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

// H5端得到的经纬度
const longitude = ref<number>(106.51851971013886)
const latitude = ref<number>(29.65076011420009)

// 微信端得到的经纬度
// const longitude = ref<number>(106.52061)
// const latitude = ref<number>(29.6464160)
</script>

<style scoped lang="scss">
.contianer {
    height: 100vh;
}
</style>